<template>
    <!-- 登录标题 -->
    <h2 class="login-title">登录</h2>
    <!-- 登录表单 -->
    <div class="login-form">
        <Form :instance="pLogin" :data="pLogin.data"></Form>
    </div>
    <!-- 间距 -->
    <div class="spacer"></div>
    <!-- 注册和登录按钮 -->
    <div class="button-container">
        <Button class="secondary-button" @click="dForm._show = true">注册</Button>
        <Button class="primary-button" type="primary" @click="() => pLogin.onLogin()">登录</Button>
    </div>
    <!-- 注册弹窗 -->
    <Popup v-model:show="dForm._show">
        <div class="popup-content">
            <Form :instance="dForm" :data="dForm.data"></Form>
            <Button class="large-button" @click="onUpdate">注册</Button>
        </div>
    </Popup>
    <!-- 图片裁剪器 -->
    <bCropper v-model:img="tempImg"></bCropper>
</template>

<script lang="ts" setup>
import Form from "@m/components/public/b_form.vue";
import bCropper from "@m/components/public/b_cropper.vue";
import { Button, Popup } from "vant";
import { Login } from "@b/model/login/login";
import { UserSelfForm } from "@b/index/account";
import { nextTick, ref, watch } from 'vue';

const tempImg = ref('')
const pLogin = new Login()
const dForm = new UserSelfForm()
dForm.title = "注册账号"
dForm.labels.password1!.show = () => true
dForm.url.add = "/v1/user/register_self"

pLogin.getCaptcha()
dForm.showCroppe = (url: string) => {
    tempImg.value = url
    nextTick(() => {
        dForm._show = false
    });
}

watch(tempImg, (url) => {
    dForm.data.headImg = url
    dForm._show = true
})

const onUpdate = async () => {
    const res = await dForm.updateData()
    if (res) {
        dForm._show = false
    }
}
</script>

<style scoped>
/* 登录标题样式 */
.login-title {
    height: 30vh;
    line-height: 50vh;
    padding-left: 28px;
    font-size: 24px;
    color: #333;
}

/* 登录表单样式 */
.login-form {
    padding: 20px;
}

/* 间距样式 */
.spacer {
    height: 5vh;
}

/* 按钮容器样式 */
.button-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    padding: 0 20px;
}

/* 次要按钮样式 */
.secondary-button {
    background-color: #f0f0f0;
    color: #333;
    border: none;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
}

/* 主要按钮样式 */
.primary-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
}

/* 弹窗内容样式 */
.popup-content {
    width: 90vw;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 大按钮样式 */
.large-button {
    width: 100%;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 15px;
    cursor: pointer;
    margin-top: 20px;
}

/* 表单单元格样式 */
.login :deep(.van-cell) {
    border-bottom: 1px solid #e0e0e0;
}
</style>